<template>
    <div class="number-grow-warp">
        <div ref="numberGrow" :data-time="time" class="number-grow" :data-value="value" :style="cusStyle">0</div>
        <div :style="subCusStyle">{{unit}}</div>
    </div>
</template>

<script>
export default {
    name: "NumberGrow",
    props: {
        time: {
            type: Number,
            default: 2
        },
        value: {
            type: Number,
            default: 0
        },
        unit: {
            type: String,
            default: ''
        },
        fixed: {
            type: Number,
            default: 0
        },
        cusStyle: {
            type: Object,
            default: {
                fontSize: '16px',
                color: '#ffffff',
                letterSpacing: '2.67px',
                display: 'block',
                lineHeight: '22px',
            }
        },
        subCusStyle: {
            type: Object,
            default: {
                fontSize: '16px',
                color: '#ffffff',
                letterSpacing: '1px',
                display: 'block',
                lineHeight: '22px',
            }
        }
    },
    methods: {
        numberGrow(ele) {
            let _this = this

            let step = ((_this.value * 10) / (_this.time * 1000))
            let current = 0
            let start = 0
            let t = setInterval(function () {
                start += step
                if (start > _this.value) {
                    clearInterval(t)
                    start = _this.value
                    t = null
                }
                if (current === start) {
                    return
                }
                current = start
                current = Number.parseFloat(current).toFixed(_this.fixed)
                ele.innerHTML = current.toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, '$1,')
            }, 10)
        }
    },
    mounted() {
        this.numberGrow(this.$refs.numberGrow)
    },
    watch: {
        value: function (newVal) {
            this.numberGrow(this.$refs.numberGrow)
        }
    },
}
</script>

<style scoped>
.number-grow-warp {
    transform: translateZ(0);
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
}
</style>